import React from 'react'
import { Card,Icon,Grid,Badge } from 'antd-mobile'
import { getApplyStatus } from '../actions'
import { connect } from 'react-redux'

import hhistory from '../history'

class BizopenApply extends React.Component {

	componentDidMount(){
		this.props.getApplyStatus()
	}

	render(){
		const { applyStatus } = this.props;
		var data = [
					// { icon:<Icon type="right" size={"sm"}/>,text:"待付款1" },
					// { icon:<Icon type="right" size={"sm"}/>,text:"待审核1" },
					// { icon:<Icon type="right" size={"sm"}/>,text:"待评价2" },
					// { icon:<Icon type="right" size={"sm"}/>,text:"待退回2" }
				   ];
		// console.log( "应用情况",JSON.stringify(applyStatus) );

		for( let p in applyStatus ){
			// console.log( p )
			switch(p){
				case "awaitPayMentNum"://待付款
					data.push(
						{
							icon:<Icon type={require( './assets/icon_index_daifukuan.svg' )} size={"lg"}/>,
							text:<div>
									<span style={{ paddingRight:"10px" }}>待付款</span>
									<span style={{ color:'#FD8900'}}>{ applyStatus[p] > 99 ? 99:applyStatus[p] }</span>
									{/*<Badge text={ applyStatus[p] } overflowCount={99} />*/}
								</div> ,
							color:'#5E91D1'

						}
					)
					break;
				case "awaitAuditNum"://待审核
					data.push(
						{
							icon:<Icon style={{height:'0.7rem',width:'0.7rem',position:'absolute',top:'50%',left:'50%',marginTop:'-0.35rem',marginLeft:'-0.35rem'}} type={require( './assets/icon_index_daishenhe.svg' )} size={"lg"}/>,
							text:<div>
									<span style={{ paddingRight:"7px" }}>待审核</span>
									<span style={{ color:'#FD8900'}}>{ applyStatus[p] > 99 ? 99:applyStatus[p] }</span>
									{/*<Badge text={ applyStatus[p] } overflowCount={99} />*/}
								</div> ,
							color:'#FD8900'
						}
					)
					break;
				case "returnedNum"://待退回
					data.push(
						{
							icon:<Icon type={require( './assets/icon_index_yituihui.svg' )} size={"lg"}/>,
							text:<div>
									<span style={{ paddingRight:"7px" }}>已退回</span>
									<span style={{ color:'#FD8900'}}>{ applyStatus[p] > 99 ? 99:applyStatus[p] }</span>
									{/*<Badge text={ applyStatus[p] } overflowCount={99} />*/}
								</div>,
							color:'#EB4F38'
						}
					)
					break;
			}
		}

		return (
			<Card full>
		      <Card.Header style={{backgroundColor:'#FCFCFC'}}
		        title={<span style={{ fontSize:"0.26rem" }}>业务开通申请</span>}
		        extra={<div><text style={{fontSize:"0.26rem",color:'#999999',position:'relative',top:'-0.08rem'}}>查看全部</text>
					<Icon style={{position:'relative',top:'0.03rem'}} type="right" size={"sm"}/></div>}
		        onClick={ () => { hhistory.push('/myBizApply') } }
		      />
		      <Card.Body>
		        <Grid data={data} columnNum={3}
		         renderItem = {
		         	dataItem => (
		         		<div>
		         			<div style={{ 
								 				height:"1.3rem",
							 					width:"1.3rem",
							 					paddingTop:"0.3rem",
												position:'relative',
												background:dataItem.color,
												borderRadius:"50%",
												margin:"0.15rem auto"
											  }}>
		         				{ dataItem.icon }
		         			</div>
		         			<div style={{fontSize:'0.28rem',lineHeight:'0.38rem',color:'#333'}}>
		         				{ dataItem.text }
		         			</div>
		         		</div>
		         	)
		         }
		         hasLine={false} />
		      </Card.Body>
		    </Card>
		)
	}
}

const mapStateToProps = ( state ) => ({
	applyStatus:state.applyStatus
})

const mapDispatchToProps = ( dispatch ) => ({
	getApplyStatus:() => dispatch( getApplyStatus() )
}) 

export default connect( mapStateToProps,mapDispatchToProps )(BizopenApply)